<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/system.css">
    <script src="js/JQuery2.1.4.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>


</head>

<body>
    <div class="box">
        <div class="head">
            <div class="head1">
                <a href="./index.html"><img src="./img/system/logo.png" alt=""></a>

                <span>后台管理系统</span>
            </div>
            <div class="head2">
                <div class="user">
                    <img src="./img/system/touxiang.png" alt="">
                    <span>user3</span>
                    <img src="./img/system/A-bottom.png" alt="">
                </div>
                <a href="" style="color: #bc0108;">后台系统</a>
                <a href="">修改密码</a>
                <a href="">安全退出</a>
                <a href="">常见问题解答</a>
            </div>

        </div>
        <div class="mid">
            <!-- 侧边栏 -->
            <div class="aside">
                <ul class="system-list nav flex-column">
                    <li><img src="./img/system/demo1.png" alt=""> <a class="active" id="" data-toggle="tab"
                            href="#home">首页</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo2.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#tongji">统计</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo3.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#dingdan">订单管理</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo4.png" alt="">
                        <a class="" id="chanpin-second" data-toggle="tab" href="#chanpin">产品管理</a>
                        <img src="./img/system/A-right.png" alt="" id="chanpin-img">
                    </li>
                    <li class="second-list">
                        <a class="" id="tianjiachanpin-a" data-toggle="tab" href="#tianjiachanpin">添加产品</a>
                    </li>
                    <li class="second-list">
                        <a class="" id="chanpinliebiao-a" data-toggle="tab" href="#chanpinliebiao">产品列表</a>
                    </li>
                    <li><img src="./img/system/demo5.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#kucun">库存管理</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo6.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#wuliu">物流管理</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo7.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#shouhou">售后管理</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo8.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#zijin">资金流水</a> <img src="./img/system/A-right.png" alt=""></li>
                    <li><img src="./img/system/demo9.png" alt=""> <a class="" id="" data-toggle="tab"
                            href="#huiyuan">会员管理</a> <img src="./img/system/A-right.png" alt=""></li>
                </ul>

            </div>
            <!-- 主题内容 -->
            <div class="content">
                <div class="tab-content">

                    <div class="tab-pane fade show active" id="home">
                        <span>首页</span>
                        <!-- 销售情况 -->
                        <div class="row">
                            <div class="col-3  card1">
                                <div>
                                    <div class="b1">
                                        <span>今日销售总额</span>
                                        <a href="">查看</a>
                                    </div>
                                    <div class="b2">
                                        <p>￥<span>15982.98</span></p>
                                        <div>
                                            <span>比昨日上升20%</span>
                                            <img src="./img/system/up.png" alt="">
                                        </div>

                                    </div>

                                </div>
                            </div>
                            <div class="col-3  card1">
                                <div>
                                    <div class="b1">
                                        <span>今日销售总额</span>
                                        <a href="">查看</a>
                                    </div>
                                    <div class="b2">
                                        <p>￥<span>15982.98</span></p>
                                        <div>
                                            <span>比昨日上升20%</span>
                                            <img src="./img/system/up.png" alt="">
                                        </div>

                                    </div>

                                </div>
                            </div>
                            <div class="col-3  card1">
                                <div>
                                    <div class="b1">
                                        <span>今日销售总额</span>
                                        <a href="">查看</a>
                                    </div>
                                    <div class="b2">
                                        <p>￥<span>15982.98</span></p>
                                        <div>
                                            <span>比昨日上升20%</span>
                                            <img src="./img/system/up.png" alt="">
                                        </div>

                                    </div>

                                </div>
                            </div>
                            <div class="col-3  card1">
                                <div>
                                    <div class="b1">
                                        <span>今日销售总额</span>
                                        <a href="">查看</a>
                                    </div>
                                    <div class="b2">
                                        <p>￥<span>15982.98</span></p>
                                        <div>
                                            <span>比昨日上升20%</span>
                                            <img src="./img/system/up.png" alt="">
                                        </div>

                                    </div>

                                </div>
                            </div>


                        </div>
                        <!-- 图表 -->
                        <div class="row">
                            <div class="col-6 card2">
                                <div><img src="./img/system/主页/主页_03.jpg" alt=""></div>
                            </div>
                            <div class="col-6 card2">
                                <div><img src="./img/system/主页/主页_05.jpg" alt=""></div>
                            </div>

                        </div>
                        <!-- 三个图表 -->
                        <div class="row">
                            <div class="col-4 card3">
                                <div><img src="./img/system/主页/主页_09.jpg" alt=""></div>
                            </div>
                            <div class="col-4 card3">
                                <div><img src="./img/system/主页/主页_11.jpg" alt=""></div>
                            </div>
                            <div class="col-4 card3">
                                <div><img src="./img/system/主页/主页_13.jpg" alt=""></div>
                            </div>

                        </div>
                    </div>

                    <div class="tab-pane fade " id="tongji">
                        统计
                    </div>
                    <div class="tab-pane fade " id="dingdan">
                        <span>订单管理</span>
                        <!-- 上面 -->
                        <div class="row">
                            <div class="col-12 dd1">
                                <div>
                                    <table class="t1 ">
                                        <tr>
                                            <td><span>商品ID：</span></td>
                                            <td><input type="text"></td>
                                        </tr>
                                        <tr>
                                            <td><span>商品名称：</span></td>
                                            <td><input type="text"></td>
                                        </tr>
                                        <tr>
                                            <td><span>买家昵称：</span></td>
                                            <td><input type="text"></td>
                                        </tr>
                                        <tr>
                                            <td><span>订单编号：</span></td>
                                            <td><input type="text"></td>
                                        </tr>
                                        <tr>
                                            <td><span>预售状态：</span></td>
                                            <td><select name="" id="">
                                                    <option value="">全部</option>
                                                </select></td>
                                        </tr>
                                    </table>
                                    <ul class="u1">
                                        <li>
                                            交易时间：<input type="text" name="" id="" placeholder="开始时间">——<input
                                                type="text" name="" id="" placeholder="结束时间">
                                        </li>
                                        <li>
                                            <div>
                                                交易类型：<select name="" id="">
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                            <div>
                                                订单状态：<select name="" id="">
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                交易类型：<select name="" id="">
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                            <div>
                                                订单状态：<select name="" id="">
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                交易类型：<select name="" id="">
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                            <div>
                                                订单状态：<select name="" id="">
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                        </li>


                                    </ul>
                                </div>

                                <p>
                                    <button>搜索订单</button>
                                    <button>批量导出</button>
                                </p>

                            </div>


                        </div>
                        <!-- 下面 -->
                        <div class="row">
                            <div class="col-12 dd2">
                                <div>
                                    <a href="">近一个月订单</a>
                                    <a href="">等待买家付款</a>
                                    <a href="">等待发货</a>
                                    <a href="">已发货</a>
                                    <a href="">退款中</a>
                                    <a href="">需要评价</a>
                                    <a href="">成功的订单</a>
                                    <a href="">关闭的订单</a>
                                </div>
                                <p>
                                    <span>商品</span>
                                    <span>单价</span>
                                    <span>数量</span>
                                    <span>销售单位</span>
                                    <span>交易状态</span>
                                    <span>实收款</span>
                                    <span>评价</span>
                                </p>
                                <h1>
                                    <img src="./img/system/Express.png" alt="">
                                </h1>
                                <i>
                                    <input type="checkbox" id="c1"><label for="c1">全选</label>
                                    <button>批量发货</button>
                                    <button>批量标记</button>
                                    <button>批量免运费</button>
                                    <input type="checkbox" id="c2"><label for="c2">不显示已关闭的订单</label>
                                </i>
                            </div>

                        </div>
                    </div>

                    <div class="tab-pane fade " id="chanpin">
                        产品管理
                    </div>
                    <div class="tab-pane fade " id="tianjiachanpin">
                        <span>添加产品</span>
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-6">
                                        <ul class="uuu1">
                                            <li>产品名称：</li>
                                            <li><input type="text"></li>
                                            <li>产品分类：</li>
                                            <li><input type="text"><button>管理分类</button></li>
                                            <li><span>产品参数</span> <button>管理参数</button></li>
                                            <li>货号：</li>
                                            <li><input type="text"></li>
                                            <li>条码：</li>
                                            <li><input type="text"></li>
                                            <li>价格：</li>
                                            <li><input type="text"></li>
                                            <li>产地：</li>
                                            <li><input type="text"></li>

                                        </ul>
                                    </div>
                                    <div class="col-6">
                                        <ul class="uuu2">
                                            <li>
                                                <button>图片</button>
                                                <button>视频</button>
                                            </li>
                                            <li>
                                                <span>
                                                    + 添加图片
                                                </span>
                                            </li>
                                            <li>
                                                <span>图片1</span>
                                                <span>图片2</span>
                                            </li>
                                            <li>
                                                <button>图片</button>
                                                <button>视频</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade " id="chanpinliebiao">
                        <span>产品列表</span>
                        <div class="hhhhhh">
                            <a href=""><img src="./img/system/deom.png" alt="">批量操作</a>
                            <span>产品名称：</span><input type="text">
                            <span>商品分类：</span><input type="text">
                            <button>查询</button>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <table>
                                    <tr style="background-color: #f8e8e8; color: #bc0108;">
                                        <td>商品名称</td>
                                        <td>商品图片</td>
                                        <td>分类</td>
                                        <td>单价</td>
                                        <td>库存</td>
                                        <td>录入时间</td>
                                        <td>操作</td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>进口芒果</td>
                                        <td><img src="./img/system/demo10.png" alt=""></td>
                                        <td>热卖推荐</td>
                                        <td>￥58.00</td>
                                        <td>3464</td>
                                        <td>2020-07-22</td>
                                        <td>
                                            <a href="">详情</a>
                                            <a href="">修改</a>
                                            <a href="">删除</a>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                        </div>
                        <p>
                            < 1 2 3 4 ... 10> 前往<input type="text" name="" id=""> 页
                        </p>




                    </div>
                    <div class="tab-pane fade " id="kucun">
                        库存管理
                    </div>

                    <div class="tab-pane fade " id="wuliu">
                        物流管理
                    </div>
                    <div class="tab-pane fade " id="shouhou">
                        售后管理
                    </div>

                    <div class="tab-pane fade " id="zijin">
                        资金流水
                    </div>
                    <div class="tab-pane fade " id="huiyuan">
                        会员管理
                    </div>


                </div>
            </div>

            <script>
                $(function () {

                    $("#chanpin-second").click(
                        function () {
                            $('.second-list').toggle()
                        }
                    );

                    var toggle = true;
                    $("#chanpin-second").click(function () {
                        if (toggle) {
                            $("#chanpin-img").attr("src", "./img/system/A-bottom.png")
                            toggle = false;
                        } else {
                            $("#chanpin-img").attr("src", "./img/system/A-right.png")
                            toggle = true;
                        }
                    });


                });


            </script>

</body>

</html>